<template>
    <div>
<!--
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：
一般结合路由和动态组件一起使用，用于缓存组件；
提供 include 和 exclude 属性，两者都支持字符串或正则表达式，
include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，
其中 exclude 的优先级比 include 高；
对应两个钩子函数 activated 和 deactivated ，
当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

 keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，
也不会出现在父组件链中；
使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
include定义缓存白名单，
keep-alive会缓存命中的组件；
exclude定义缓存黑名单，被命中的组件将不会被缓存；
max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据
    -->
        <keep-alive :include="whiteList" :exclude="blackList" :max="amount">
            <component :is="currentView"></component>
        </keep-alive>
        <button @click="changeView('A')">切换到A</button>
        <button @click="changeView('B')">切换到B</button>
        <button @click="changeView('C')">切换到C</button>
    </div>
</template>

<script>
    import ComA from "./ComA";
    import ComB from "./ComB";
    import ComC from "./ComC";
    export default {
        name: "KeepAliveTest",
        components:{
            ComA,ComB,ComC
        },
        data(){
            return {
                whiteList:['ComA','ComC'],  //缓存白名单，这里的组件会被缓存，即不会重新执行 created钩子
                blackList:['ComB'], //缓存黑名单
                amount:3, //缓存组件上限，超出上限使用LRU的策略置换缓存数据
                currentView: 'ComA'
            }
        },
        methods:{
            changeView(name) {
                this.currentView = `Com${name}`
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>

</style>